<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车设计</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/Vue.js"></script>
</head>
<body>
    <header>
        <nav>
            <a href=""><img src="img/image13.png" alt=""></a>
            <h2>我的购物车</h2>
            <div class="instruction">温馨提示：产品是否购买成功以购买成功，以最终下单为准，请尽快结算。</div>
            <div class="user">
                <ul>
                    <a href="#">用户A</a>
                    <li>个人中心</li>
                    <li>评价晒单</li>
                    <li>我的喜欢</li>
                    <li>小米账户</li>
                    <li>退出登陆</li>       
                </ul>
                
            </div>
            <p>
                <a href="#">我的订单</a>
            </p>
        </nav>
    </header>
    <div id="root">
        <div class="attribute">
            <div style="width:200px">
                <input type="checkbox" class="checkBox">
                全选
             </div>
            <div style="width:280px;">商品名称</div>
            <div style="width:100px">单价</div>
            <div style="width:150px">数量</div>
            <div style="width:100px">小计</div>
            <div style="width:50px">操作</div>
        </div>
        <div class="attributePage" v-if="bol">
            <div class="firstAttr">
                <input type="checkbox" class="checkBox" @click="select(event)">
                <img src="img/image01.webp" alt="">
             </div>
            <div style="width:280px;">xiaomi civi 8GB+256GB 小白裙</div>
            <div style="width:100px">2499元</div>
            <div style="width:150px;height:38px;display:flex;justify-content: start;border: 1px solid #999;">
                <a href="#" class="change" v-on:click="num-=1" v-if="num-1">-</a>
                <a href="#" class="change" v-else="num">-</a>
                <input type="text" class="dataNumber" v-model="num" min="1">
                <a href="#"class="change" v-on:click="num+=1">+</a>
            </div>
            <div style="width:100px;color: #ff6700;">{{bothPrice}}元</div>
            <a href="#" style="width:50px;" v-on:click="bol=bol-1">×</a>
        </div>
        <div class="endPage">
            <a href="#"style="width:100px;margin-left:20px;">继续购物</a>
            <div style="width:140px;margin-right: 600px;">已选择{{bothNum}}件</div>
            <div style="width: 160px;color: #ff6700;">合计：{{allPrice}}元</div>
            <a href="#" style="width: 200px;background-color: #ff6700;text-align: center;line-height: 50px;font-size: 20px;color: #fff;">
                去结算
            </a>
        </div>
    </div>
    <script>
        const vm=Vue.createApp({
            data(){
                    return{
                        num:1,
                        price:2499,
                        bol:true,
                        bothbool:0,
                        cisu:0
                    }
            },
            methods:{
                select:function(event){
                   this.cisu=this.cisu+1;
                   if(this.cisu%2==0)
                   {
                    this.bothbool=0;
                   }
                   else{
                    this.bothbool=1;
                   }
                   console.log(this.cisu)
                }
            },
            computed:{
                bothPrice(){
                    return this.num*this.price
                },
                bothNum(){
                    return this.bothbool*this.num
                },
                allPrice(){
                    return this.bothNum*this.price
                }
            }
        }).mount("#root")
    </script>
</body>
</html>